<template>
    <div>
        <div class="px-10 py-5 d-flex a-center">
            <el-button type="primary mr-10" @click="addList">新增</el-button>
            <div>提示：拐点序号、经度、纬度需填写完整，缺少任意一项该条数据将不会被保存。</div>
        </div>
        <div  class="px-15" v-for="(item,i) in rowList" :key="i">
            <el-row :gutter="10" class="mb-10">
                <el-form ref="form" :model="item" size="mini" :inline="true" label-width="80px" :rules="rules">
                    <el-form-item label="拐点序号" prop="pointnum">
                        <el-input v-model="item.pointnum" placeholder="请输入拐点序号"></el-input>
                    </el-form-item>
                    <el-form-item label="经度" prop="longitude">
                        <el-input v-model="item.longitude" placeholder="请输入经度"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度" prop="latitude">
                        <el-input v-model="item.latitude" placeholder="请输入经度"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <i class="el-icon-remove-outline f-16 mr-5" @click="remove(i)"></i>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>
<script>
    import {validatorLongitude,validatorLatitude} from '@/utils/validate'
    export default {
        name: "intakeTab",
        props:{
            list:{
                default(){
                    return []
                }
            }
        },
        mounted(){
            this.rowList = [...this.list]
        },
        data(){
            return {
                rowList:[],
                rules:{ 
                    pointnum: [{ required: true, message: '请输入拐点序号', trigger: 'blur' }],
                    longitude: [
                    {validator: validatorLongitude, required: true, trigger: "blur" }
                    ],
                    latitude: [
                    {validator: validatorLatitude, required: true, trigger: "blur" }
                    ]
                }
            }
        },
        methods:{
            addList(){
                let item = {
                    pointnum: '',
                    longitude: '',
                    latitude: ''
                }
                this.rowList.push(item)
            },
            remove(i){
                this.rowList.splice(i,1)
            },
            async validateAll(){
                let forRefs = this.$refs.form ||[];
                let isRes = true
                for(let formRef of forRefs){
                    let result = await this.validate(formRef);
                    if(!result){
                        isRes = false
                    }
                    break;
                }
                if(isRes){
                    return this.rowList;
                } else {
                    return false
                }   
            },
            validate(formRef){
                return new Promise((resolve,reject) => {
                    formRef.validate(valid => {
                        if(valid){
                            resolve(true)
                        }else{
                            reject(false)
                        }
                    })
                })
            }
            //this.$refs["formRef"].validate

        }
    }
</script>